<template>
  <div class="">
    <page-search
      :search-config="searchConfig"
      @search-click="handleSearchClick"
      @reset-click="handleResetClick"
    />

    <page-content
      ref="pageContentRef"
      :content-config="contentConfig"
      @add-new-click="handleAddNewClick(relatedCb())"
    >
      <template #createAt="scope">{{ formatUTC(scope.row[scope.prop]) }}</template>
      <template #lastAt="scope">{{ formatUTC(scope.row[scope.prop]) }}</template>
      <template #status="scope">
        <el-switch
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          v-model="scope.row[scope.prop]"
          :active-value="1"
          :inactive-value="0"
          :before-change="handleBeforeSwitchChange"
          @change="handleSwitchChange(scope.row)"
        />
      </template>
      <template #action="scope">
        <el-button
          class="action-btn"
          text
          type="primary"
          size="small"
          icon="Edit"
          @click="handleEditClick(scope.row, relatedCb(scope.row))"
        >
          编辑
        </el-button>

        <el-popconfirm title="确定要删除吗？" @confirm="handleDeleteClick(scope.row)">
          <template #reference>
            <el-button class="action-btn" text type="danger" size="small" icon="Delete">
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </page-content>

    <page-model
      :model-config="modelConfig"
      :page-name="contentConfig.pageName"
      ref="pageModelRef"
      @update-page-data="handleUpdatePageData"
    />
  </div>
</template>

<script setup lang="ts" name="">
import PageSearch from '@/components/page-search/page-search.vue'
import PageContent from '@/components/page-content/page-content.vue'
import PageModel from '@/components/page-model/page-model.vue'

import searchConfig from './config/search.config'
import contentConfig from './config/content.config'
import modelConfig from './config/model.config'

import usePageContent from '@/hooks/usePageContent'
import usePageModel from '@/hooks/usePageModel'

import useCommonStore from '@/stores/main/common/common'

import { formatUTC } from '@/utils/format'
import { reactive, nextTick } from 'vue'
// - data
const switchState = reactive({
  switchStatus: false // 用于解决el-switch初始化会执行change事件
})

// - store
const commonStore = useCommonStore()

// - hooks
const {
  pageContentRef,
  handleResetClick,
  handleSearchClick,
  handleUpdatePageData,
  handleDeleteClick,
  handleSwitchClick
} = usePageContent()

const { pageModelRef, handleAddNewClick, handleEditClick } = usePageModel()

// - mehods

const relatedCb = (res?: any) => {
  if (res?.id) {
    modelConfig.rules!.password![0].required = false
  } else {
    modelConfig.rules!.password![0].required = true
  }

  nextTick(() => {
    commonStore.fetchEntireDataAction(1, 99999, 1).then((res) => {
      const entireRoles = res.result.list.map((item) => {
        return { label: item.name, value: item.id }
      })
      modelConfig.formItems.forEach((item) => {
        if (item.prop === 'roleId') item.options = [...entireRoles]
      })
    })
  })
}

const handleBeforeSwitchChange = () => {
  switchState.switchStatus = true
  return switchState.switchStatus
}

const handleSwitchChange = (item) => {
  if (switchState.switchStatus) {
    handleSwitchClick(item)
  }
}
</script>

<style scoped lang="less">
.user {
  border-radius: 15px;
  overflow: hidden;
}
</style>
